<style>
	.add{clear:both; margin:10px 0;}
	.add dt{float:left; color:#FF3333;}
	.add dd{float:left;margin-left:10px;}
	
	.sub td{border:none; background-color:#66CC66; height:13px; line-height:13px;}
	.sub .sub_btn{cursor:pointer; background-color:#33CC99; }
	
	.cname{font-size:16px; font-weight:bold; color:#CC3300;}
	.tuimg{cursor:pointer; vertical-align:middle;}
	
	.pop{position:absolute; height:125px; width:250px; border:1px solid #CCC; z-index:99; background-color: Silver;}
	.pop ul li{line-height:30px; height:30px;}
	.pop ul li .btn{margin-left:40px; cursor:pointer;}
	.pop ul li span{float:right;}
	.bg{z-index:9; position:absolute; height:2000px; width:1000px; opacity: 0.8; background-color:#333333; top:0; left:0;}
</style>
<h2><a href="javascript:;" class="button">添加分类</a></h2>
<div id="add_cate" style="display:none;">
<dl class="add">
	<form method="post">
	<input type="hidden" name="method" value="add">
	<dt>一级分类</dt>
	<dd>分类名称：<input type="text" name="name"></dd>
	<dd>排序数字：<input type="text" name="ord" style="width:100px;"></dd>
	<dd><input type="submit" style="cursor:pointer" value="添加"></dd>
	</form>
</dl>
<dl class="add">
	<form method="post">
	<input type="hidden" name="method" value="add">
	<dt>二级分类</dt>
	<dd>分类名称：<input type="text" name="name"></dd>
	<dd>排序数字：<input type="text" name="ord" style="width:100px;"></dd>
	<dd>所属分类：<select name="fcid">{{html_options options=$cateArr}}</select></dd>
	<dd><input type="submit" style="cursor:pointer" value="添加"></dd>
	</form>
</dl>
</div>
<div style="clear:both;margin:5px;height:5px;"></div>
<table width="100%" border="0" cellpadding="0" cellspacing="2" class="list">
	<tr>
		<th width="10%">分类ID</th>
		<th width="60%">分类名称</th>
		<th width="10%">排序</th>
		<th width="20%"></th>
	</tr>
	{{foreach from=$rows key=key item=item name="est"}}
	<tr id="tr_{{$item.id}}" {{if $smarty.foreach.est.index%2 eq '0'}}class="even"{{/if}}>
		<td align="center" valign="top">
			<span><image class="tuimg" title="点击查看二级分类" src="/images/{{if $item.sub}}tu_yes{{else}}tu_no{{/if}}.gif" width="20" height="20" id="{{$item.id}}"></span>{{$item.id}}
		</td>
		<td align="center">
			<span class="cname" id="name_{{$item.id}}">{{$item.name}}</span>
			{{if $item.sub}}
			<table width="100%" cellpadding="0" cellspacing="0" class="sub" style="display:none;" id="sub_{{$item.id}}">
				{{foreach from=$item.sub key=kk item=subinfo}}
				<tr id="sub_tr_{{$subinfo.id}}">
					<td width="10%">{{$subinfo.id}}</td>
					<td width="70%" id="sub_name_{{$subinfo.id}}">{{$subinfo.name}}</td>
					<td width="10%" id="sub_ord_{{$subinfo.id}}">ord:{{$subinfo.ord}}</td>
					<td width="10%"><input class="sub_btn" type="button" value="修改/删除" name="{{$subinfo.id}}_{{$subinfo.name}}_{{$subinfo.ord}}"></td>
				</tr>
				{{/foreach}}
			</table>
			{{/if}}
		</td>
		<td align="center" id="ord_{{$item.id}}">{{$item.ord}}</td>
		<td align="center"><input class="catebtn" style="background-color:Blue;color:white;cursor:pointer;" type="button" value="编辑" name="{{$item.id}}_{{$item.name}}_{{$item.ord}}">&nbsp;<input class="catebtn" style="background-color:red;color:white;cursor:pointer;" type="button" value="删除" name="{{$item.id}}_{{$item.name}}_{{$item.ord}}"></td>
	</tr>
	{{/foreach}}
</table>
<div id="bg" class="bg" style="display:none;"></div>
<div id="pop" class="pop" style="display:none;">
	<ul>
		<li style="background-color:#330000; color: white; font-weight: bold;"><span><image id="popclose" src="/images/close.gif" title="关闭" style="width:30px;height:30px;cursor:pointer;"></span>快速修改</li>
		<li>分类名称：<input type="text" name="name" id="pop_name" value=""><input type="hidden" name="id" id="pop_id" value=""></li>
		<li>排序数字：<input type="text" name="ord" id="pop_ord" value="" style="width:100px;"></li>
		<li>
			<input class="btn" type="button" value="保存" onclick="popsubmit('save')">
			<input class="btn" type="button" value="删除" onclick="popsubmit('del')"></li>
	</ul>
</div>
<script>
	var type = "";
	$(document).ready(function(){
		$(".tuimg").each(function(){
			$(this).click(function(){
				var id = $(this).attr('id');
				if($("#sub_"+id).length > 0){
					$("#sub_"+id).toggle();
				}else{
					alert("无二级分类");
					return false;
				}
			})
		})
		
		$(".button").click(function(){
			$("#add_cate").toggle();
		})
		
		$(".sub_btn").each(function(){
			$(this).click(function(e){
				popShow($(this).attr("name"),e);
				type = "sub";
			})
		})
		
		$("#popclose").click(function(){
			popHide();
		})
		
		$(".catebtn").each(function(){
			$(this).click(function(e){
				popShow($(this).attr("name"),e);
				type = "";
			})
		})
	})
	
	function popHide(){
		$(".pop").hide();
		$(".bg").hide();
	}
	
	function popShow(value,e){
		var con = value.split("_");
		$("#pop_id").val(con[0]);
		$("#pop_name").val(con[1]);
		$("#pop_ord").val(con[2]);
		center($(".pop"),$(".bg"),e);
	}
	
	function popsubmit(method)
	{
		if($("#pop_name").val() == ""){
			alert("请填写名称");return false;
		}
		if(method == "del"){
			if(!confirm("确认删除？"))return false;
		}
		var id = $("#pop_id").val();
		var name = $("#pop_name").val();
		var ord = $("#pop_ord").val();
		$.ajax({
			type:"POST",
			url:"admin_cate.php",
			data:{method:method,id:id,name:name,ord:ord,type:type},
			success:function(msg){
				var msgArr = msg.split("|");
				var id = msgArr[1];
				if(msgArr[0] == "save"){
					$("#" + (type == "sub" ? "sub_" : "") + "name_" + id).html(msgArr[2]);
					$("#" + (type == "sub" ? "sub_" : "") + "ord_" + id).html("ord:"+msgArr[3]);
				}else if(msgArr[0] == "del"){
					$("#" + (type == "sub" ? "sub_" : "") + "tr_"+id).hide();
				}
				popHide();
			}            
		});
	}
</script>